<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>
    <script src="./js/jquery-3.0.0.js"></script>
</head>
<body>
<div style="width:590px;height:470px;border:1px solid #ccc">
    <img class="lunbo" src="./image/1.jpg" alt="">
    <div style="position:absolute;left:50px;top:450px" class="yuandian">
        <span class="one" >●</span>
        <span class="two" >○</span>
        <span class="three" >○</span>
        <span class="four" >○</span>
    </div>

</div>
<script>
    $(function(){
        i=0;
        var t;
        // alert($('.yuandian span').length-1);
        function run(){
            t=setInterval(function(){
                if(i>($('.yuandian span').length-1)){
                    i=0;
                    $('.yuandian span').eq(i).siblings().html('○');
                    $('.yuandian span').eq(i).html('●');
                    num=i+1;
                    $('.lunbo')[0].src='./image/'+num+'.jpg';
                    i++;
                }else{
                    $('.yuandian span').eq(i).siblings().html('○');
                    $('.yuandian span').eq(i).html('●');
                    num=i+1;
                    $('.lunbo')[0].src='./image/'+num+'.jpg';

                    // $($('.yuandian span')[i]).mouseleave(function(){

                    //     return false;
                    // });
                    i++;
                }
            },1000);
        }


        $('.yuandian span').mouseenter(function(){
            $(this).siblings().html('○');
            $(this).html('●');
            num=$(this).index()+1;
            $('.lunbo')[0].src='./image/'+num+'.jpg';
            clearInterval(t);
            i=num;
            return false;
        }).mouseleave(function(){
            run();

        })
        run();
    })
</script>
</body>
</html>